<template>

	<!-- 注册面板 -->
	<!-- 裴萌洁-->
	<div class="register-container">
		<div class="head-box">
			<el-card id="top-head">
				<el-page-header @back="goBack" content="填 写 注 册"></el-page-header>
			</el-card>
		</div>
		<div class="register-box">
			<el-form :model="registerform" :rules="registerRules" ref="registerformRef" label-width="80px" class="register_form">
				<el-form-item label="用户名:" prop="userId">
					<el-input v-model="registerform.userId"></el-input>
				</el-form-item>
				<el-form-item label="密码:" prop="password">
					<el-input v-model="registerform.password"></el-input>
				</el-form-item>
				<!-- 	<el-form-item label="确认密码:" prop="checkPass">
					<el-input v-model="registerform.checkPass"></el-input>
				</el-form-item> -->
				<el-form-item label="姓名:" prop="name">
					<el-input v-model="registerform.name"></el-input>
				</el-form-item>
				<el-form-item label="班级:" prop="clas">
					<el-input v-model="registerform.clas"></el-input>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="register">提交</el-button>
				</el-form-item>
			</el-form>

		</div>

	</div>
</template>

<script>
	export default {
		data() {
			return {
				//登录表单的数据绑定对象
				registerform: {
					userId: 'testUserId0',
					password: '123456',
					// checkPass: '123456',
					name: 'testName',
					clas: 'testClass',
				},
				//这是表单的验证规则
				registerRules: {
					//验证用户名是否合法
					userId: [{
							required: true,
							message: '用户名必填项',
							trigger: 'blur'
						},
						{
							min: 5,
							max: 12,
							message: '长度在3-12之间',
							trigger: 'blur'
						}
					],
					//验证密码是否合法
					password: [{
							required: true,
							message: '请输入密码',
							trigger: 'blur'
						},
						{
							min: 6,
							max: 10,
							message: '长度在6-15之间',
							trigger: 'blur'
						}
					],
					// checkPass: [{
					// 		required: true,
					// 		message: '请再次输入密码',
					// 		trigger: 'blur'
					// 	},
					// 	{
					// 		min: 6,
					// 		max: 10,
					// 		message: '长度在6-15之间',
					// 		trigger: 'blur'
					// 	}
					// ],
					name: [{
							required: true,
							message: '姓名必填项',
							trigger: 'blur'
						},
						{
							min: 5,
							max: 12,
							message: '长度在3-12之间',
							trigger: 'blur'
						}
					],
					clas: [{
							required: true,
							message: '班级必填项',
							trigger: 'blur'
						},
						{
							min: 5,
							max: 12,
							message: '长度在3-12之间',
							trigger: 'blur'
						}
					],
				}
			}
		},
		methods: {
			register() {
				//1.进行基本校验
				this.$refs.registerformRef.validate(async valid => {

					if (!valid) return; //校验失败：如果valid不正确就return出去

					const {
						data: resString
					} = await this.$http.post("register", this.registerform); //②接收后台返回的string数据：含有两块内容--flag和student <--| = |--> ①访问后台

					var res = JSON.parse(resString); //转换为json对象

					if (res.flag == "error") {

						const h = this.$createElement; //使用这个可以定制message
						this.$notify({
							position: 'bottom-right',
							type: 'error',
							offset: 50, //距离窗口边缘偏移距离
							duration: 3000, //设置显示时间，0则不会消失
							title: '注册提示', //标题
							message: h('i', {
								style: 'color: teal'
							}, '注册失败！用户名已存在！'),
						});

					} else {
						//存储token
						// window.sessionStorage.setItem("token", res.token);

						this.$notify({
							title: '注册提示', //标题
							message: '注册成功！',
						});
						this.$router.push('/login')
					}
				})
			},
			goBack() {
				this.$router.push('/login')
			}
		}
	}
</script>

<style lang="less" scoped>
	#top-head {
		border-radius: 10px;
		border: 1px solid #eee;
		box-shadow: 0 0 10px #ddd;
	}

	.head-box {

		// position: absolute;
		// left:50%;
		// transform: translate(-50%, -50%);
		/* 设置位置 */
		margin-top: 0.5%;
		// margin-right: 10px;
		position: absolute; //设置定位方式为ab方便精准设置位置
		width: 100%;
		height: 70px;
		// left: 50%;
		// top: 50%;
		transform: translate(0%, 0%); //设置这个后位于正中央
	}

	.register-box {
		/* 设置形状颜色 */
		width: 500px;
		height: 400px;
		border: 1px solid #eee;
		box-shadow: 0 0 10px #ddd;
		background-color: whitesmoke;
		border-radius: 30px; //盒子四角的曲率
		/* 设置位置 */
		position: absolute; //设置定位方式为ab方便精准设置位置
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%); //设置这个后位于正中央
	}

	.register_form {
		position: absolute;
		top: 60px;
		width: 90%;
		padding: 0 20px;
		box-sizing: border-box;
	}

	.register-container {
		background-color: #67C23A;
		height: 100%; //将颜色铺满页面
	}
</style>
